<template>
    <fieldset>
        <legend>登录页面</legend>
        用户名：
        <input type="text" v-model="username">
        <br />
        密码：
        <input type="text" v-model="password" @keydown.enter="login">
        <br />
        <button @click="login">登录</button>
    </fieldset>
</template>

<script setup>
import { ref } from "vue"
import * as api from '../../api/users'
import {useRouter} from 'vue-router'
//1.获取输入框中的用户名和密码
let username = ref('')
let password = ref('')
//2.发起请求 请求登录
let router = useRouter()
let login = async() => {
    let res = await api.loginApi(username.value, password.value)
    // console.log(res)
    //服务器会返回token token是一个令牌 这个令牌需要保存在本地 后续请求带上令牌 就能随意访问服务器的数据了
    //1.localStorage 关掉页面 只要token还具备时效 就能访问其他页面 不需要重新登入
    //2.sessionStorage 用户关掉页面 token就被清除 重新打开页面 需要用户重新登入
    if(res.data.state){
        //将token存到本地
        sessionStorage.setItem('qf-token',res.data.token)
        //页面要进行跳转
        router.push('/')
    }else{
        alert(res.data.msg)
    }

}

</script>